{include file="public/header" /}
<script src="__PIC__/js/jquery-2.1.1.min.js"></script>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })
</script>
<link rel="stylesheet" href="__PIC__/css/common.css">
<link rel="stylesheet" href="__PIC__/css/map.css">
<body>
<div class="col-sm-12">
    <div class="layui-form layui-form-item">
        <div class="layui-col-md6 layui-input-inline" style="margin-top: 5px">
            <input type="text" class="layui-input search" name="keyword" value="{$keyword}" placeholder="企业名称"/>
        </div>
        <div class="layui-input-inline">
            <input type="text"  name="start" style="margin-top: 5px" value="{$start}" onclick="wk.lay_date2(this);" readonly class="layui-input search" placeholder="开始时间" />
        </div>
        <div class="layui-input-inline">
            <input type="text"  name="end" style="margin-top: 5px" value="{$end}" onclick="wk.lay_date2(this);" readonly class="layui-input search" placeholder="结束时间" />
        </div>
        <div class="layui-input-inline" style="margin-top: 5px">
            <button class="layui-btn" id="goSearch">立即搜索</button>
            <button  class="layui-btn layui-btn-normal" id="emptySearch">重置</button>
        </div>
    </div>
</div>
<div class="loading">
    <div class="loadbox">
        <img src="__PIC__/images/loading.gif">页面加载中...
    </div>
</div>
<div class="data">
    <div class="data-title">
        <div class="title-center ">企业数据</div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info boxstyle">
                    <div class="title">次数统计</div>
                    <div class="info-main">
                        <ul>
                            <li onclick="location.href = '/admin/Datas/index';" style="cursor: pointer;">
                                <img src="__PIC__/images/111.png" height="30" alt>
                                <span>资料浏览次数</span>
                                <p>{$dataSee}</p>
                            </li>
                            <li>
                                <img src="__PIC__/images/222.png" height="30" alt>
                                <span>医生与代表互动次数</span>
                                <p>{$userTalk}</p>
                            </li>
                        </ul>
                    </div>
                </div><div class="info boxstyle">
                    <div class="title">会议统计</div>
                    <div class="info-main">
                        <ul>
                            <li onclick="location.href = '/admin/Meet/index';" style="cursor: pointer;">
                                <img src="__PIC__/images/111.png" height="30" alt>
                                <span>会议次数</span>
                                <p>{$meetCount}</p>
                            </li>
                            <li>
                                <img src="__PIC__/images/222.png" height="30" alt>
                                <span>会议时长(单位：分)</span>
                                <p>{$meetTimes}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="info boxstyle">
                    <div class="title">数量统计</div>
                    <div class="info-main">
                        <ul>
                            <li onclick="location.href = '/admin/Question/index';" style="cursor: pointer;">
                                <img src="__PIC__/images/333.png" height="30" alt>
                                <span>医生资料咨询数量</span>
                                <p>{$dataQues}</p>
                            </li>
                            <li onclick="location.href = '/admin/Sae/index';" style="cursor: pointer;">
                                <img src="__PIC__/images/444.png" height="30" alt>
                                <span>SAE报告数量</span>
                                <p>{$dataSae}</p>
                            </li>
                        </ul>
                    </div>
                    <!--<span style="color: #FFF;">说明</span>-->
                </div>
                <br/>

            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>医生分布图</p>
                <div class="num">
                    {for start='0' end="$userNum|strlen"}
                    <span>{$userNum|substr=$i,1}</span>
                    {/for}
                </div>
            </div>
            <div class="cen-top map" id="map"></div>
            <!--<div class="cen-bottom boxstyle">-->
            <!--<div class="title">车辆充电高峰时间</div>-->
            <!--<div id="echarts_3" class="charts"></div>-->
            <!--</div>-->
        </div>
        <div class="con-right fr">
            <div class="right-center boxstyle">
                <div class="title">医生职称分析图</div>
                <div id="echarts_5" class="charts"></div>
            </div>
            <div class="right-top boxstyle">
                <div class="title">医生性别比例图</div>
                <div id="echarts_4" class="charts"></div>
            </div>
            <div class="right-bottom boxstyle">
                <div class="title">医生科室分析图</div>
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>
</body>
{include file="public/footer" /}
<script src="__PIC__/js/echarts.min.js"></script>
<script src="__PIC__/js/china.js"></script>
<!--<script src="__PIC__/js/echarts.js"></script>-->
</html>
<script>
    $('#goSearch').on('click', function () {
        searchReload();
    });
    $('#emptySearch').on('click', function () {
        $('.search').val('');
        searchReload();
    });
    function searchReload() {
        var param = $('.layui-input').serialize();
        location.href = '/admin/Picture/company?' + param;
    }
</script>
<script>
    $(function () {
        map();
        echarts_4(); //性别
        echarts_5(); //职称
        echarts_6(); //科室
        function map() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            var data = {$userMapData};
            var geoCoordMap = {$userGeoCoordMap};
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name+'('+data[i].value+')',
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };

            option = {
                // backgroundColor: '#404a59',
                /***  title: {
        text: '实时行驶车辆',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },**/
                // tooltip : {
                //     trigger: 'item'
                // },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#3eabff',
                            borderColor: 'gray'
                        },
                        emphasis: {
                            areaColor: '#006be4'
                        }
                    }
                },
                series : [
                    {
                        name: '医生分布',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return a.value - b.value;
                        }).slice(0, 50)),
                        // symbolSize: function (val) {
                        //     return val[2] / 20;
                        // },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFF',
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,.3)'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_4() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_4'));

            option = {

                tooltip : {
                    trigger: 'item',
                    formatter: "{b}: <br/>  {c} ({d}%)"
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                color:[ '#4472c4','#ed7d31'],
                series : [
                    {
                        name: '比例',
                        type: 'pie',
                        radius : '60%',
                        center: ['50%', '45%'],
                        data:{$userSex},//[{'value':10,'name':'男'},{'value':20,'name':'女'}],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_5() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_5'));

            var xData = {$userJobName};

            var data = {$userJobValue};

            option = {
                // backgroundColor: "#141f56",

                tooltip: {
                    show: "true",
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.4)', // 背景
                    padding: [8, 10], //内边距
                    // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                    formatter: function(params) {
                        if (params.seriesName != "") {
                            return params.name + ' ：  ' + params.value + ' 位';
                        }
                    }

                },
                grid: {
                    borderWidth: 0,
                    top: 20,
                    bottom: 35,
                    left:40,
                    right:10,
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: [{
                    type: 'category',

                    axisTick: {
                        show: false
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color:'rgba(255,255,255,0.2)'
                        }
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: '12'
                        }
                    },
                    data: xData
                }, {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: xData
                }],
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: '12'
                        },
                        formatter: '{value}'
                    }
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00c0e9'
                            }, {
                                offset: 1,
                                color: '#3b73cf'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0
                        },
                        emphasis: {
                            shadowBlur: 15,
                            shadowColor: 'rgba(105,123, 214, 0.7)'
                        }
                    },
                    zlevel: 2,
                    barWidth: '20%',
                    data: data
                },
                    {
                        name: '',
                        type: 'bar',
                        xAxisIndex: 1,
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: 'transparent',
                                borderWidth: 0,
                                shadowBlur: {
                                    shadowColor: 'rgba(255,255,255,0.31)',
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 2
                                }
                            }
                        },
                        barWidth: '20%'
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_6() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_6'));

            var xData = {$userRoomName};

            var data = {$userRoomValue};

            option = {
                tooltip: {
                    show: "true",
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.4)', // 背景
                    padding: [8, 10], //内边距
                    // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                    formatter: function(params) {
                        if (params.seriesName != "") {
                            return params.name + ' ：  ' + params.value + ' 位';
                        }
                    }

                },
                grid: {
                    borderWidth: 0,
                    top: 20,
                    bottom: 35,
                    left:40,
                    right:10,
                    textStyle: {
                        color: "#fff"
                    }
                },
                xAxis: [{
                    type: 'category',

                    axisTick: {
                        show: false
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color:'rgba(255,255,255,0.2)'
                        }
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: '12'
                        }
                        // formatter:function(val){
                        //     return val.split("").join("\n")
                        // },
                    },
                    data: xData
                }, {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: xData
                }],
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: '12'
                        },
                        formatter: '{value}'
                    }
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00c0e9'
                            }, {
                                offset: 1,
                                color: '#3b73cf'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0
                        },
                        emphasis: {
                            shadowBlur: 15,
                            shadowColor: 'rgba(105,123, 214, 0.7)'
                        }
                    },
                    zlevel: 2,
                    barWidth: '20%',
                    data: data
                },
                    {
                        name: '',
                        type: 'bar',
                        xAxisIndex: 1,
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: 'transparent',
                                borderWidth: 0,
                                shadowBlur: {
                                    shadowColor: 'rgba(255,255,255,0.31)',
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 2
                                }
                            }
                        },
                        barWidth: '20%'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    })
</script>
